<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style>
  body{
	text-align:center;
  }
  #map_canvas{
	margin: 20px auto;
	border: 1px dashed #C0C0C0;
	width: 800px;
	height: 500px;
  }
</style>

<script type="text/javascript">
  //将变量设置为全局变量方便方法调用
  var map, infowindow;
  var info_content = "";
  var count = 0;

  function initialize() {
    var latlng = new google.maps.LatLng(30.33508, 114.17211);
    var myOptions = {
      zoom: 10,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	infowindow = new google.maps.InfoWindow();
	//调用创建marker函数
	creatMarker(latlng);
	var html = makeHTML();
	google.maps.event.addListenerOnce(map, "tilesloaded", function() {
		infowindow.setOptions({ position: latlng, content: html, pixelOffset: new google.maps.Size(0,-30) });
		infowindow.open(map);
	});
	// Display first content in infowindow
	google.maps.event.addListenerOnce(infowindow, "domready", function() {
		showIWContent(count);
	});
  }

  function showIWContent(nr) {

	//如果浏览器支持ActiveX对象，则使用ActiveX创建XMLHttpRequest对象；否则使用本地JavaScript对象来创建；
	var xmlhttp;
	if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	}
	else
	{// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	  xmlhttp.open("GET", "../resources/infowindow-content.xml", true);
	  xmlhttp.onreadystatechange = function() {
	   if(xmlhttp.readyState==4) {
		var xmlDoc = xmlhttp.responseXML;
		var entries = xmlDoc.getElementsByTagName("content");
		// Obtain the attribues of the requested entry
		 var header = entries[nr].getAttribute("header");
		 var text = entries[nr].getAttribute("text");

		 // Style and store info window content 
		 info_content = "<b>" + header + "<\/b><p>" + text + "<\/p>";

		 // Adjust counter
		 if(count < entries.length-1) { count++; }
		 else { count = 0; }

		 // Write content to appropriate div in infowindow
		 document.getElementById("tochange").innerHTML = info_content; 
		 
	   }
	  }; 

	  xmlhttp.send();
  }

 //创建Marker
 function creatMarker(position) {
    var g = google.maps;
	var marker = new g.Marker({
      position: position,
      map: map,
	});

	//添加marker单击事件
	g.event.addListener(marker, "click", function() {
		var html = makeHTML();
		infowindow.setOptions({content: html, pixelOffset: new g.Size(0,0)});
		infowindow.open(map, this);
	});
	return marker;
 }

 //为infowindow添加内容
 function makeHTML() {
	var html ="<div id='infowindow'>" +
				"<div id='tochange'>" + info_content + "<\/div>" +
				"<p id='content'><a href='javascript:void(0)' onclick='showIWContent(count)'>Change content<\/a><\/p>" +
				"<button onclick='buttonListener()'>点我</button>"+
				"<\/div>";
  return html;
 }
 //
 function contentChange() {
	document.getElementById("content").innerHTML = "I am changed!"; 
 }
 //按钮事件
 function buttonListener() {
	alert("You clicked me!");
	return;
 }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>